import { sharedTenantsAdd } from "@/services/knowledgeFile";
import { fetchTenantList } from "@/services/tenantManagement";
import { Button, Input, message, Modal, Table } from "antd";
import React from "react";

class TenantChooseModal extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      list:[],
      total:0,
      current:1,
      size:10,
      loading:false,
      selectedList:[],
      visible:false,
      search:""
    }
  }

  componentDidMount(){
    if(this.props.onRef){
      this.props.onRef(this)
    }
  }

  initModal = selectedList => {
    this.setState({
      visible:true,
      selectedList
    },() => {
      this.getList()
    })
  }

  getList = () => {
    this.setState({loading:true},async () => {
      const { current,size,search } = this.state;
      const res = await fetchTenantList({current,size,search})
      this.setState({
        list:res.records,
        total:res.total,
        loading:false
      })
    })
  }

  doCancel = () => {
    this.setState({
      list:[],
      total:0,
      current:1,
      size:10,
      loading:false,
      selectedList:[],
      visible:false
    })
  }

  doOk = async () => {
    const { selectedList } = this.state;
    const { refreshList,libraryId } = this.props;
    const res = await sharedTenantsAdd({
      tenantIds:selectedList,
      libraryId
    })
    message.info(res.message)
    this.doCancel()
    if(refreshList){
      refreshList()
    }
  }

  doSearch = (current,size) => {
    this.setState({current,size},() => {
      this.getList()
    })
  }

  updateUser = (id) => {
    const { selectedList } = this.state;
    let newList = []
    if(selectedList.indexOf(id) === -1){
      selectedList.push(id)
      newList = selectedList
    }else{
      newList = selectedList.filter(item => item != id)      
    }
    this.setState({selectedList:newList})
  }

  render(){
    const {
      list,
      total,
      current,
      size,
      loading,
      selectedList,
      visible,
      search
    } = this.state;
    const columns = [
			{
				title: "企业名称",
				dataIndex: "name",
				key: "name",
				align: 'center',
			},
			{
				title: "账号",
				dataIndex: "username",
				key: "username",
				align: 'center',
			},
			{
				title: "操作",
				align: 'center',
				render: (_, row) => {
          const selected = selectedList.indexOf(row.id) != -1;
					return <Button type={selected ? "default" : "primary"} size="small" onClick={() => this.updateUser(row.id)}>{selected ? '已选择' : '选择'}</Button>
				}
			},
		];

    return (
      <Modal
        title="选择服务方"
        visible={visible}
        onCancel={this.doCancel}
        onOk={this.doOk}
        centered
        bodyStyle={{height:"70vh",overflowY:"auto"}}
        width={600}
      >
        <div className="topOptionBox">
          <Input.Search placeholder="请输入企业名称或账号" value={search} onChange={e => this.setState({search:e.target.value})} onSearch={() => this.doSearch(1,size)} style={{width:200}} />
        </div>
        <Table 
          columns={columns}
          dataSource={list}
          loading={loading}
          rowKey={'id'}
          pagination={{
            current,
            pageSize:size,
            showQuickJumper:true,
            onChange:this.doSearch,
            total
          }}
        />
      
      </Modal>
    )
  }
  
}

export default TenantChooseModal